<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>看板</title>
    
    <style>  
      
    body {  width:1920px; height:1080px; font-family: '宋体', 'Lucida sans', Arial; font-size: 20px;  background-image:url('bg.png'); background-repeat:no-repeat;  background-size:auto 100%;  color:#3b5fcc      ; }
    table {*border-collapse: collapse; /* IE7 and lower */    border-spacing: 0;  width: 100%;    margin-top: 5px ;    }  
    thead{ color:#2478aa; }
    tbody{ color:#2478aa; }
    .bordered {     border: solid #436eee 1px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;   border-radius: 6px;    -webkit-box-shadow: 0 1px 1px #436eee;    -moz-box-shadow: 0 1px 1px #436eee;   box-shadow: 0 1px 1px #436eee;  }  
    .bordered tr:hover {    background: #555;   -o-transition: all 0.1s ease-in-out;   -webkit-transition: all 0.1s ease-in-out;    -moz-transition: all 0.1s ease-in-out;    -ms-transition: all 0.1s ease-in-out;   transition: all 0.1s ease-in-out;   }  
    .bordered td, .bordered th {  /*   border-left: 1px solid #ccc;   border-top: 1px solid #ccc;    */ padding: 10px;   text-align: left;   }  
    .bordered th {    background-color: #dce9f9;background-image: -webkit-gradient(linear, left top, left bottom, from(#042030), to(#05556d)); background-image: -webkit-linear-gradient(top, #042030, #05556d);  background-image: -moz-linear-gradient(top, #042030, #05556d); background-image: -ms-linear-gradient(top, #042030, #05556d); background-image: -o-linear-gradient(top, #042030, #05556d);  background-image: linear-gradient(top, #042030, #05556d);  -webkit-box-shadow: 0 1px 0 #436eee inset; -moz-box-shadow:0 1px 0 #436eee inset; box-shadow: 0 1px 0 #436eee inset;border-top: none;/*text-shadow: 0 1px 0 rgba(255,255,255,.5);*/}  
    .bordered td:first-child, .bordered th:first-child {   border-left: none;  }  
    .bordered th:first-child {  -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0;  }  
    .bordered th:last-child {   -moz-border-radius: 0 6px 0 0;    -webkit-border-radius: 0 6px 0 0;   border-radius: 0 6px 0 0;  }  
    .bordered th:only-child{   -moz-border-radius: 6px 6px 0 0;   -webkit-border-radius: 6px 6px 0 0;   border-radius: 6px 6px 0 0;   }  
    .bordered tr:last-child td:first-child {   -moz-border-radius: 0 0 0 6px;    -webkit-border-radius: 0 0 0 6px;  border-radius: 0 0 0 6px;   } 
    .bordered tr:last-child td:last-child {   -moz-border-radius: 0 0 6px 0;   -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0;   }  
     #divCenter {    background-image:url('center.png');   	background-repeat:no-repeat;  background-size:100% 100%; 	color:#3b5fcc      ; }  
    
  </style>
    <script src="lib/echarts.min.js"></script>
        <script src="lib/ajaxWms.js"></script>
  </head>
  <body style="">
  	 <h1 align="center" style="font-size:40px;color:#ffffff"> 智能仓库管理系统看板</h1>
    <div id="emplyPer" style="width:400px;height:300px;float:right;right:0px"></div>
		    <script type="text/javascript">
		    	
		    	  var emplyPerChart = echarts.init(document.getElementById('emplyPer'));
		    	  const gaugeData = [
		  {
		    value: 20,
		    name: '设备区',
		    title: {
		      offsetCenter: ['-30%', '74%']
		    },
		    detail: {
		      offsetCenter: ['-30%', '98%']
		    }
		  },
		  
		  {
		    value: 60,
		    name: '报废区',
		    title: {
		      offsetCenter: ['30%', '75%']
		    },
		    detail: {
		      offsetCenter: ['30%', '98%']
		    }
		  }
		];
		var emplyPerChartOption = {
		  series: [
		    {
		      type: 'gauge',
		     
		      pointer: {
		         width: 4,
		        length: '80%',
		        offsetCenter: [0, '10%']
		      },
		      anchor: {
		        show: true,
		        showAbove: true,
		        size: 15,
		        itemStyle: {
		          borderWidth: 4
					 }
		      },
		      progress: {
		        show: true,
		        overlap: true,
		        roundCap: true
		      },
		      axisLine: {
		        roundCap:true
		      },
		      data: gaugeData,
		      title: {
		        fontSize: 14
		      },
		      detail: {
		        width: 38,
		        height: 10,
		        fontSize: 10,
		        color: '#fff',
		        backgroundColor: 'auto',
		        borderRadius: 3,
		        formatter: '{value}%'
		      }
		    }
		  ]
		};
		 emplyPerChart.setOption(emplyPerChartOption);
		    </script>
    <div id="main1" style="width: 400px;height:200px;position: absolute;top:400px;left:1500px"></div>
     <div id="main" style="width:400px;height:200px;position: absolute;right:0;top:600px;"></div>
    
    <div id="itemOrder" style="width:400px;height:700px;position: absolute;left:10px;top:100px"></div>
    
			   <script type="text/javascript">

			var itemOrderChart = echarts.init( document.getElementById('itemOrder'));
			const itemOrderData = [];
			for (let i = 0; i < 9; ++i) {
			  itemOrderData.push(Math.round(Math.random() * 200));
			}
			itemOrderOption = {
			  xAxis: {
			    max: 'dataMax'
			  },
			  yAxis: {
			    type: 'category',
			    data: ['华为', '联想', 'ibm', '苹果', '神州',"华硕","戴尔",'威联','研华'],
			    inverse: true,
			    animationDuration: 300,
			    animationDurationUpdate: 300,
			    max: 8// only the largest 9 bars will be displayed
			  },
			  series: [
			    {
			      realtimeSort: true,
			      name: '在库库存信息',
			      type: 'bar',
			      data: itemOrderData,
			      label: {
			        show: true,
			        precision: 1,
		          position: 'right',
		          valueAnimation: false,
		          fontFamily: 'serif',
		          fontStyle:'normal',
		          color:'#3b5fcc',
		          fontSize:15
			      }
			    }
			  ],
			  legend: {
			    show: true
				
			  },
			  animationDuration: 0,
			  animationDurationUpdate: 2000,
			  animationEasing: 'linear',
			  animationEasingUpdate: 'linear'
			};

			itemOrderChart.setOption(itemOrderOption)
			function run1() {
			  for (var i = 0; i < itemOrderData.length; ++i) {
			    if (Math.random() > 0.9) {
			      itemOrderData[i] += Math.round(Math.random() * 2000);
			    } else {
			      itemOrderData[i] += Math.round(Math.random() * 200);
			    }
			  }
			  itemOrderChart.setOption({
			    series: [
			      {
			        type: 'bar',
			        data:itemOrderData
			      }
			    ]
			  });
			}

			  run1();

			setInterval(function () {
			  run1();
			}, 30000);
			   	
			   </script>
    
    <div id="divCenter" style="width:600px;height:400px; margin: 0 auto;">

				<div style="padding-top:130px;">
					 <div align="center" style="font-size:60px;letter-spacing:24px;font-weight:900"> 4574</div>

					 <h2 align="center" style="font-size:20px;color:#2d55cd;letter-spacing:14px"> 累计进出库总计</h2>
				</div>
    </div>
        
        
   <div   style="width:600px; margin: 0 auto;">

			<table class="bordered">  
				    <thead> 
				    <tr>  
				
					 
					    <th>名称</th>  
					    <th>编号</th> 
					    <th>位置</th>   
					    <th>时间</th>  
				    </tr>  
				    </thead> 
				    <tbody id="tbodyId" style="font-size:12px" >
				    	
					   
				    </tbody> 
				 </table>  
   </div>
        

 
    <script type="text/javascript">
    	
    	
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'),"dark");
       const workAllTime = [];
       const worklastTime=[];
       const  workCount= [];
       
       var option1 = {
					 
					  legend: {	
					 	 	show: true,
					 	  top: "6%",
					 	  itemGap:400,
		          data: [  'wcs总时间']
		        },
					 tooltip: {
								    trigger: 'item',
								    formatter: ' {b}<br/>  {c}{a} ({d}%)'
								  },
					 
					  series: [
					    {
					      name: 'wcs总时间',
					      type: 'pie',
					      radius: '75%',
					      center: ['50%', '50%'],
					      data: workAllTime,
					      minAngle: 1,
					     
					      emphasis: {
					        itemStyle: {
					          shadowBlur: 3,
					          shadowOffsetX: 0,
					          shadowColor: 'rgba(0, 0, 0, 0.5)'
					        }
					      },
					      tooltip: {
								    formatter: ' {b}<br/>  {c}{a} ms({d}%)'
								  },
					    	}
					  ]
					};
				  
				  
				  myChart.setOption(option1);
      
     var chart1Requst= {url:"http://127.0.0.1:12138/sys/getStat",fun:function(d){
        workAllTime .length = 0;
        worklastTime.length = 0;
        workCount.length = 0;
	     	for (var i = 0; i < d.data.length; i++) {
	     		  var stat= d.data[i];
				    var name =stat.className;
				  
				    workAllTime.push({
				      name: name,
				      value: stat.workAllTime
				    });
				  
				    
				} 
			 var option = {
					  series: [
					    {
					      data: workAllTime
					    	}
					  ]
					};
				  
				  
				  myChart.setOption(option);
     	
     }}
      


  
     
var myChart1 = echarts.init(document.getElementById('main1'));

      
function randomData(v,vMe) {
	vMe=Math.floor(vMe * 100) / 100
	v=Math.floor(v * 100) / 100
  now = new Date(+now + oneDay);
   dataAll.push( {
    name: now.toString(),
    value: [
      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),v
    ]
  });
  dataMe.push( {
    name: now.toString(),
    value: [
      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),vMe
    ]
  });
  
}
let dataAll = [];
let dataMe = [];
let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;

for (var i = 0; i < 500; i++) {
 randomData(0,0);
}
option2 = {
  title: {
    text: '服务器使用率',
    left:"center"
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      var value1 = params[0].value;
      var value2 = params[1].value;
      var date = new Date(params.name);
      return (
      "cpu："+ value2[1] + ' ；wcs： ' + value1[1]
      );
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    type: 'time',
    show: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],

    splitLine: {
      show: true
    }
  },
  series: [
    {
      name: 'cpume',
      type: 'line',
      showSymbol: false,
      data: dataMe
    },{
      name: 'cpuAll',
      type: 'line',
      showSymbol: false,
      data: dataAll
    }
    
  ]
};


 myChart1.setOption(option2);



var chart2Requst= {url:"http://127.0.0.1:12138/Carrier/cpu",fun:function(dd){
    dataAll.shift();
    dataMe.shift();
    randomData(dd.data.all,  dd.data.f);
		  myChart1.setOption({
		    series: [
		      {
		        data: dataMe
		      },{
		        data: dataAll
		      }
		    ]
		  });
  		
	}}
	
	var chart3Requst= {url:"http://127.0.0.1:8090/api/welcome/lastData",fun:function(dd){
  
	   var data=dd.data;
	   var str=""
	   
	   for(var i=0;i<data.length;i++){
		   	str+="<tr>" 
	
		  	str+=addTd(data[i].bName);
				str+=addTd(data[i].barCode);
				str+=addTd(data[i].rLocId);
			  str+=addTd(data[i].changeTime);
				str+="</tr>"  
	   	
	   	}
 	document.getElementById('tbodyId').innerHTML=str;
  		
	}}
	
	function addTd(text){
		return "<td>"+text+"</td>"
		
		}
	
	this.requestArray.push(chart1Requst);
	this.requestArray.push(chart2Requst);
  this.requestArray.push(chart3Requst);



    </script>
    
    
    
    <canvas id="canvas" style="width:50px;heigth:30xp;position: absolute;top:609px;left:10px" ></canvas>
  </body>
  <script src='d2/base.js' lang="utf-8"></script>
<script src='d2/Fullscreen.js' lang="utf-8"></script>
<script src='d2/component.js' lang="utf-8"></script>

<script>
	   resList=[];
var cranePic = new Image();  
    cranePic.src = "d2/png/crane.png";  
    var backPic = new Image();  
    backPic.src = "d2/png/back.png";  
    var productPic = new Image();  
    productPic.src = "d2/png/product.png";  
    
    var carrierBackPic = new Image();  
    carrierBackPic.src = "d2/png/carrierBack.png";  
    screenHeight= window.screen.height 
    screenWidth =window.screen.width
    craneBegin=202;//输送线开始水平位置
    craneEnd=screenWidth-200
    cols=50
    stockSize=(craneEnd-craneBegin)/(cols-1)//货位边长

    staticGraph = [];//静态图像
    craneList=[];  






var testTime=0
var info="asdf";

var chart4Requst= {url:"http://127.0.0.1:12138/Daping",fun:function(responseText){
		var val=[];	
		val.push(Math.random())
		val.push(Math.random())
			    	 
		for(var i=0;i<2;i++){
        		crane1=craneList[i]
        			var goalmm=val[i]*(craneEnd-craneBegin)+craneBegin;//目标位置
        			crane1.xGoal=goalmm;
        			var crane1 = craneList[i]
		        	var xmm=crane1.getAnchor().x;//当前位置
		          var s=goalmm-xmm
		          var a=(s-crane1.xv)*2
		        	crane1.xa=a
		        	crane1.xv+=a/60.0;//当前速度
   }
		},
	errFun:function(){
		var val=[];	
		val.push(Math.random())
		val.push(Math.random())
			    	 
		for(var i=0;i<2;i++){
        		crane1=craneList[i]
        			var goalmm=val[i]*(craneEnd-craneBegin)+craneBegin;//目标位置
        			crane1.xGoal=goalmm;
        			var crane1 = craneList[i]
		        	var xmm=crane1.getAnchor().x;//当前位置
		          var s=goalmm-xmm
		          var a=(s-crane1.xv)*2
		        	crane1.xa=a
		        	crane1.xv+=a/60.0;//当前速度
   }
		
		
	}}

  this.requestArray.push(chart4Requst);


   
      function showCrane(){
		    	 for(var i=0;i<craneList.length;i++){
				     	 var crane1=craneList[i]
				     	 var xmm=crane1.getAnchor().x;
				     	 var goal=crane1.xGoal;
				     	 
				     	 if(goal>xmm){//目标在右边
				     	 	  crane1.xa=Math.abs(crane1.xa)
					     	 	if(crane1.xv<0){//向左跑
					     	 		crane1.xv+=crane1.xa/10;
					     	 	}
				     	 	
				     	 	}else if(goal<xmm){//目标在左边
				     	 		 crane1.xa=-Math.abs(crane1.xa)
					     	 	if(crane1.xv>0){//向右跑
					     	 		crane1.xv+=crane1.xa/10;
					     	 	}
				     	 	}
				     	 
				     	 var x=	crane1.xv/60.0
				     	 if(Math.abs(goal-xmm)<2){
				     	 	   crane1.setAnchor({x:crane1.xGoal,y:crane1.y})
				     	 }else{
				     	 		 crane1.move(x,0)
				     	 }
		     			 crane1.draw();
		     			 
		     }
		       product1.setAnchor(crane1.getAnchor());
		       product1.draw();
		    }
		    
		   
  	
		  	   
		
		 
		    
		    	    		
	
	
	
window.onload = function(){
   
	var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.height= screenHeight-20
    canvas.width= screenWidth
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle="#0ff";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.translate(0.5,0.5);

	 storeRoom = new  StoreRoom(context,{shelfs:4,cols:38,rows:5,x1:200,y1:10,x2:canvas.width-200,y2:canvas.height-20});
	 canvas.onmousemove = function (e) {
						var location = getLocation(e.clientX, e.clientY);
						selectId =storeRoom.getId(location.x,location.y);
		};
		 for(var i=1;i<3;i++){
				 	var y=0;
				 	if(i==1){
				 		 y=214;
				 	}else{
				 		y=620;	
				 	}
				   
				   craneList.push(new Crane(context,(craneBegin+craneEnd)/2,y,stockSize));
       	   staticGraph.push(new Line({context:context,x1:craneBegin,y1:y,x2:craneEnd,y2:y,width:3,strokeStyle :"rgba(255,255,255,1)"}));
       	   staticGraph.push(new Line({context:context,x1:craneBegin-30,y1:y,x2:craneBegin,y2:y,width:3,strokeStyle :"rgba(255,255,255,0.2)"}));
       	   staticGraph.push(new Line({context:context,x1:craneEnd,y1:y,x2:craneEnd+30,y2:y,width:3,strokeStyle :"rgba(255,255,255,0.2)"}));
      }

	  product1=new Product(context,1000,170,stockSize);


    //动画循环,绘画执行操作
      (function drawFrame(t){
          window.requestAnimationFrame(drawFrame); 
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillStyle="#0ff";
          context.fillRect(0,0,canvas.width,canvas.height);
          context.drawImage(backPic,0,0,canvas.width, canvas.height)
		      //货位格子
      	 	for(var i=0;i<staticGraph.length;i++){
        		staticGraph[i].draw();
        	}
		      //堆垛机
				  showCrane();
					storeRoom.draw();

	    		if(resList&&resList.length>0){
	        	for(var i=0;i<resList.length;i++){
	        		var d = resList[i];
	        		addStockProduct(context,storeRoom,d.l,d.s)
	        	}
	        }
    
      }());
      
      
      
	}
	
  	  function addStockProduct(context,storeRoom,id,status){
    	    var widthType=2
     	  	var w=storeRoom.storeWidth/9
     	  	var color="#ffffff";
   	  		if(status==1){
   	  			color="#fa0";
   	  		} else if(status==2){
   	  			color="#1111ff";
   	  		}else if(status==3){
   	  			color="#f0f";
   	  		}
     	  	
     	  	var  key=parseInt(id)
     	    var  index=1
     	  	var stock = new StockProduct(context,color);
     	  	var store = storeRoom.stores['k'+key];
     	  	var anchor = store.getAnchor();
     	  	
     	  	var newAnchor={x:anchor.x,y:anchor.y}
     	  	
     	  	stock.setAnchor(newAnchor)
     	  	stock.draw();
     	  }
     	  
        function getLocation(x, y) {
					var bbox = canvas.getBoundingClientRect();
					return {
						x: (x - bbox.left) * (canvas.width / bbox.width),
						y: (y - bbox.top) * (canvas.height / bbox.height)
					};
				}

</script>

</html>